<script lang="ts" setup>

import {Calendar, Delete, Edit, Message, QuestionFilled, Search} from "@element-plus/icons-vue";
// import {reactive} from "vue";
import {ref} from "vue";
import type { ComponentSize } from 'element-plus'
const currentPage1 = ref(5)
const currentPage2 = ref(5)
const currentPage3 = ref(5)
const currentPage4 = ref(4)
const pageSize2 = ref(100)
const pageSize3 = ref(100)
const pageSize4 = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const tableData = [
  {
    id: '1',
    name: '学工部',
    createtime:'2023-02-05 12:22:11',
    updatetime:'2023-02-05 12:22:11'
  },
  {
    id: '2',
    name: '教研部',
    createtime:'2025-04-02 03:28:35',
    updatetime:'2025-04-02 03:28:35'
  },
  {
    id: '3',
    name: '咨询部',
    createtime:'2025-02-14 21:45:11',
    updatetime:'2025-02-14 21:45:11'
  },
  {
    id: '4',
    name: '就业部',
    createtime:'2025-06-03 12:11:11',
    updatetime:'2025-06-03 12:11:11'
  },
  {
    id: '5',
    name: '人事部',
    createtime:'2025-02-02 11:11:12',
    updatetime:'2025-02-02 11:11:12'
  }
]
</script>

<template>


  <div style="margin: 30px">
    <el-icon :size="30">
      <Edit/>
    </el-icon>
    <el-icon :size="30">
      <Delete/>
    </el-icon>
    <el-icon :size="30">
      <Message/>
    </el-icon>
    <el-icon>
      <QuestionFilled />
    </el-icon>
  </div>
  <div style="margin: 30px">
  </div>
  <div style="margin: 30px">
    <h2>部门信息表</h2>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="Id" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="createtime" label="createTime" width="180"/>
      <el-table-column prop="updatetime" label="updateTime" width="180"/>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="primary" size="small">编辑</el-button>
          <el-button type="small" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
  <div style="margin: 30px">
  </div>
</template>
<style scoped>
</style>